﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
    IEnumerable<Tuple<string, string>> Rooms = ViewBag.ChatRooms;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link href="~/css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="~/js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="col-md-8 col-md-offset-2">
                <h3 class="text-center">WebSocket聊天室</h3>
                <p>当前状态：{{webSocketState}}</p>
            </div>
            <div class="col-md-8 col-md-offset-2">
                @foreach (var item in Rooms)
                {
                    <div class="col-md-2">
                        <button class="btn btn-success" id="@item.Item1" v-on:click="connect($event)">@item.Item2</button>
                    </div>
                }
                <div class="col-md-2">
                    <button v-on:click="connClose" class="btn btn-warning">断开连接</button>
                </div>
            </div>
            <div id="msgBox" class="col-md-8 col-md-offset-2" style="margin-top:30px;margin-bottom:5px;background-color:#f0f0f0;height:500px;border:1px solid #808080;overflow-x: hidden; word-break:break-all;">
                <div v-html="msg" ></div>
            </div>
            <div class="col-md-6 col-md-offset-2" style="padding-left:0;">
                <input v-model="content" placeholder="输入内容" class="form-control" type="text" style="border-radius: 0;"/>
            </div>
            <div class="col-md-2">
                <button v-on:click="sendMsg"  class="btn btn-danger" v-bind:class="{ disabled: !isConneced }" style="width:150px;text-align:center;">提交</button>
            </div>
        </div>
        
    </div>
    <script src="~/js/jquery.min.js"></script>
    <script type="text/javascript" src="~/js/bootstrap.min.js"></script>
    <script src="~/js/websocket.js"></script>
</body>
</html>